<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="发票信息" @leftClick="back"></my-navbar>
		<!-- #endif -->
		<view class="box">
			<u-subsection class="tabs" :list="list" :current="current" @change="changeTab"></u-subsection>

		</view>
		<view class="content" v-show="current==0">
			<u-form ref="Form1" :model="form1" :rules="rules1" label-position="top" :error-type="['toast']"
				:label-style="{color:'#9A9A9A'}">
				<u-form-item v-for="item in form1Modle" :label="item.label" :prop="item.prop" :required="item.required">
					<u-input v-model="form1[item.prop]" :placeholder="item.placeholder" />
				</u-form-item>
			</u-form>
			<view class="tips">注：电子发票和纸质发票具有同等法律效应，可支持报销入账</view>
		</view>
		<view class="content" v-show="current==1">
			<u-form ref="Form2" :model="form2" :rules="rules2" label-position="top" :error-type="['toast']"
				:label-style="{color:'#9A9A9A'}">
				<u-form-item v-for="item in form2Modle" :label="item.label" :prop="item.prop" :required="item.required">
					<u-input v-model="form2[item.prop]" :placeholder="item.placeholder" />
				</u-form-item>
			</u-form>
			<view class="tips">注：电子发票和纸质发票具有同等法律效应，可支持报销入账</view>
		</view>
		<view class="submit flex-center" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				list: [{
					name: '企业'
				}, {
					name: '个人'
				}, ],
				current: 0,
				//企业
				form1Modle: [{
						label: '抬头',
						prop: 'title',
						placeholder: '抬头名称或极速开票六位代码',
						required: true,
					},
					{
						label: '税号',
						prop: 'tax_code',
						placeholder: '纳税人识别号或社会统一征信代码',
						required: true,
					},
					{
						label: '开户银行',
						prop: 'bank',
						placeholder: '请输入开户银行',
					},
					{
						label: '银行账号',
						prop: 'bank_account',
						placeholder: '请输入银行账号',
					},
					{
						label: '企业地址',
						prop: 'address',
						placeholder: '请输入企业地址',
					},
					{
						label: '企业电话',
						prop: 'mobile',
						placeholder: '请输入企业电话',
					},
				],
				rules1: {
					title: [{
						required: true,
						message: '请填写抬头',
						trigger: 'blur'
					}],
					tax_code: [{
						required: true,
						message: '请填写税号',
						trigger: 'blur'
					}],
				},
				form1: {
					title: '',
					tax_code: '',
					bank: '',
					bank_account: '',
					address: '',
					mobile: '',
				},
				//个人
				form2Modle: [{
					label: '抬头',
					prop: 'title',
					placeholder: '抬头名称或极速开票六位代码',
					required: true,
				}, ],
				rules2: {
					title: [{
						required: true,
						message: '请填写抬头',
						trigger: 'blur'
					}],
				},
				form2: {
					title: '',
				},
			};
		},
		onLoad() {
			this.getData();
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.Form1.setRules(this.rules1);
			this.$refs.Form2.setRules(this.rules2);
		},
		methods: {
			getData() {
				$https('GET', 'getInvoice', {}, res => {
					if (res.data.errcode == 0) {
						let data = res.data.data.list;
						data.map(item => {
							if (item.type == 1) {
								this.form2 = {
									title: item.title,
								}
								// this.current = 1;
							} else if (item.type == 2) {
								this.form1 = {
									title: item.title,
									tax_code: item.tax_code,
									bank: item.bank,
									bank_account: item.bank_account,
									address: item.address,
									mobile: item.mobile,
								}
								// this.current = 0;
							}
						})
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},
			changeTab(index) {
				this.current = index;
			},
			submit() {
				let option;
				if (this.current == 0) {
					this.$refs.Form1.validate(valid => {
						if (valid) {
							option = JSON.parse(JSON.stringify(this.form1));
							option.type = 2;
							this.sendSubmit(option);
						}
					});
				} else {
					this.$refs.Form2.validate(valid => {
						if (valid) {
							option = JSON.parse(JSON.stringify(this.form2));
							option.type = 1;
							this.sendSubmit(option);
						}
					});
				}

			},
			sendSubmit(option) {
				if (option.address == null) {
					option.address = "";
				}
				$https('POST', 'editInvoice', option, res => {
					if (res.data.errcode == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						});
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},
			back() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},

		},
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 1px;

		.box {
			width: 328rpx;
			margin: 20rpx auto;

			.tabs {
				width: 100%;
			}
		}

		.content {
			padding: 0 40rpx;

			.u-form-item {
				padding: 0;
			}

			.tips {
				font-size: 24rpx;
				color: #E84B4B;
				margin: 20rpx 0;
			}
		}

		.submit {
			color: #fff;
			width: 566rpx;
			height: 88rpx;
			background: $dgreen;
			box-shadow: 0px 2px 14px 2px rgba(0, 0, 0, 0.2);
			border-radius: 48rpx;
			margin: 60rpx auto;
			// position: fixed;
			// bottom:80rpx;
			// left:0;
			// right:0;
			z-index: 2;
		}

	}
</style>
